<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :headers="{ Authorization: token }"
    :show-file-list="false"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :before-upload="beforeUpload"
    name="file"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
    <i v-loading="loading" v-else class="el-icon-plus avatar-uploader-icon">{{ placeholder }}</i>
    <div v-if="isShowTip" slot="tip" class="el-upload__tip">{{ tip }}</div>
  </el-upload>
</template>

<script>
// import { getToken } from "@/tools/users";
import { getToken } from '@/utils/auth' // 验权

export default {
  name: "PicUpload",
  props: {
    value: {
      type: String,
      default() {
        return "";
      }
    },
    action: {
      type: String,
      default() {
        return `${this.baseURL}/v1/wechat/register/imageUpload`;
      }
    },
    placeholder: {
      type: String,
      default() {
        return "上传照片";
      }
    },
    tip: {
      type: String,
      default() {
        return "仅支持 .jpg、.jpeg、.bmp、.png 格式，图片大小为 1M 以内";
      }
    },
    isShowTip: {
      type: Boolean,
      default() {
        return true;
      }
    },
    url: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      token: getToken(),
      imageUrl: this.url,
      loading: false
    };
  },
  watch: {
    url(val) {
      if (val) {
        this.imageUrl = val;
      }
    },
    value(val) {
      if (!val) {
        this.imageUrl = "";
      }
    }
  },
  methods: {
    handleUploadSuccess(res) {
      if (res && res.code === 200) {
        this.imageUrl = res.data;
        this.$message.success("上传成功");
        this.$emit("input", res.data);
        this.$emit("on-success", res.data);
      } else {
        this.$message.error((res && res.message) || "上传图片失败");
      }
      this.loading = false;
    },
    handleUploadError(err, file, fileList) {
      this.loading = false;
      this.$emit("on-error", err, file, fileList);
      this.$message.error("上传失败");
    },
    checkImage(file) {
      const isValid = false;
      const isImage =
        file.type === "image/jpeg" || file.type === "image/bmp" || file.type === "image/png";
      if (!isImage) {
        this.$message.error("只能上传 jpg、jpeg、bmp、png 类型的图片!");
        return isValid;
      }

      const isLt5M = file.size / 1024 / 1024 < 1;
      if (!isLt5M) {
        this.$message.error("图片大小不能超过 1MB!");
        return isValid;
      }

      return !isValid;
    },
    beforeUpload(file) {
      this.loading = true;
      const isValid = this.checkImage(file);
      if (!isValid) {
        this.loading = false;
      } else {
        this.imageUrl = "";
      }
      return isValid;
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar-uploader /deep/ {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
  .avatar-uploader-icon {
    font-size: 14px;
    color: #20a0ff;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    /deep/ .el-loading-spinner {
      top: 0;
      margin-top: 15px;
    }
  }

  .avatar {
    width: 110px;
    height: 110px;
    display: block;
  }
  .el-upload__tip {
    margin-top: -6px;
    line-height: 1.5;
    color: #c4c8cf;
  }
}
</style>
